/* estilos 5.css
   Variables, rems y limpieza para consistencia.
   1rem = referencia base (16px por defecto).
*/

/* Fuente decorativa */
@import url('https://fonts.googleapis.com/css2?family=Bacasime+Antique&display=swap');

:root{
  --base-font: "Helvetica", "Arial", sans-serif;
  --decor-font: "Bacasime Antique", serif;

  --bg-body: #efce7b;      /* fondo general */
  --page-bg: #f8f8f8;      /* fondo interior .página */
  --nav-bg: #b8cee8;       /* nav */
  --nav-text: #25533f;
  --h1-bg: #25533f;
  --h1-color: #aacc96;
  --p-bg: #aacc96;
  --p-color: #25533f;
  --menu-hover-bg: #789ac3;
  --menu-active-bg: #aacc96;
  --menu-active-color: #25533f;

  --radius: 1rem;
  --gap: 1rem;
  --transition: 180ms;
  --max-width: 70rem;
}

/* Reset mínimio */
* { box-sizing: border-box; }
html,body { height: 100%; }
body {
  margin: 0;
  padding: 0;
  background: var(--bg-body);
  font-family: var(--base-font);
  color: var(--p-color);
  line-height: 1.45;
  -webkit-font-smoothing:antialiased;
}

/* Contenedor principal */
.página {
  background: var(--page-bg);
  margin: 2rem;
  border-radius: 2rem;
  padding: 2rem;
  max-width: var(--max-width);
}

/* Imagen (responsive y centrada) */
img {
  width: 25rem;             /* 25rem ≈ 400px */
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
  padding: 1rem;
  border-radius: 10%;
  border: 0.3rem solid var(--h1-bg);
}

/* Encabezados */
h1 {
  font-size: 2.5rem;
  text-align: center;
  font-family: var(--decor-font);
  font-weight: 400;
  margin: 1.5rem 1rem 2rem 0;
  padding: 2rem;
  background-color: var(--h1-bg);
  border-radius: var(--radius);
  color: var(--h1-color);
  box-shadow: 0.09rem 0.09rem 0.9rem 0.1rem silver;
}

h2 {
  font-size: 1.1rem;
  text-align: center;
  font-family: var(--base-font);
  font-weight: 300;
  margin: 1rem 0 1.5rem 0;
  padding: 1rem;
  background-color: var(--h1-bg);
  border-radius: 0.8rem;
  color: var(--h1-color);
  box-shadow: 0.09rem 0.09rem 0.9rem 0.1rem silver;
}

/* Párrafos */
p {
  font-size: 1rem;
  text-align: justify;
  font-family: var(--base-font);
  margin: 1.5rem 1rem 2rem 0;
  padding: 1.25rem;
  background-color: var(--p-bg);
  border-radius: 1rem;
  color: var(--p-color);
}

/* Nav / Menú */
nav {
  background-color: var(--nav-bg);
  color: var(--nav-text);
  font-family: var(--base-font);
  padding: 1rem;
  margin: 1rem 0; /* dentro de .página ya hay margen general */
  border-radius: var(--radius);
}

/* lista horizontal limpia */
.menu {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
}

/* enlaces como botones */
.menu__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border-radius: 0.6rem;
  text-decoration: none;
  font-size: 1rem;
  color: var(--nav-text);
  background: transparent;
  transition: transform var(--transition) ease, background var(--transition) ease, color var(--transition) ease;
  border: 1px solid transparent;
}

/* icono */
.menu__link i { font-size: 1.05rem; line-height: 1; }

/* hover / focus */
.menu__link:hover,
.menu__link:focus {
  background-color: var(--menu-hover-bg);
  color: var(--h1-bg);
  transform: translateY(-0.08rem);
  outline: none;
}

/* focus-visible para accesibilidad (teclado) */
.menu__link:focus-visible{
  outline: 0.18rem solid rgba(0,0,0,0.12);
  outline-offset: 0.12rem;
}

/* estado activo */
.menu__link.is-active,
.menu__link[aria-current="true"] {
  background-color: var(--menu-active-bg);
  color: var(--menu-active-color);
  transform: translateY(-0.1rem);
  box-shadow: 0 0.6rem 1rem rgba(109,31,66,0.16);
}

/* Footer y header */
footer {
  background-color: #ef6f3c;
  color: #efce7b;
  font-size: 0.8rem;
  font-family: var(--base-font);
  margin: 1.5rem 1rem 2rem 0;
  padding: 0.6rem;
  border-radius: 1rem;
}

/* header (si se utiliza) */
header {
  background-color: #aacc96;
  color: #25533f;
  font-family: var(--base-font);
  padding: 2rem;
}

/* Responsive: que el menú envuelva en pantallas pequeñas */
@media (max-width: 34rem) {
  .menu {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .menu__link { padding: 0.45rem 0.7rem; font-size: 0.95rem; }
  img { width: 18rem; } /* más chico en pantallas pequeñas */
}

.info-dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr; /* dos columnas iguales */
  gap: 2rem;                      /* espacio entre columnas */
  margin: 1.5rem 1rem 2rem 0;
}

.info-dos-columnas p {
  background-color: var(--p-bg);
  color: var(--p-color);
  font-size: 1rem;
  text-align: justify;
  font-family: var(--base-font);
  padding: 1.25rem;
  border-radius: 1rem;
  margin: 0;
}